<!DOCTYPE html>
<html class="x-admin-sm">

<head>
	<meta charset="UTF-8">
	<title>电子学会比赛管理系统</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
	<link rel="stylesheet" href="./css/font.css">
	<link rel="stylesheet" href="./css/xadmin.css">
	<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="./js/xadmin.js"></script>
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
	<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	<![endif]--></head>

<body>
<div class="layui-fluid">
	<div class="layui-row" id="app">
		<form class="layui-form" lay-filter="accountForm">
			<div class="layui-form-item">
				<label for="username" class="layui-form-label">
					<span class="x-red">*</span>用户名</label>
				<div class="layui-input-inline">
					<input type="text" maxlength="30" id="username" placeholder="请输入用户名" id="userName" name="userName" required="" lay-verify="required"
					       autocomplete="off" class="layui-input"></div>
			</div>
			<div class="layui-form-item">
				<label for="username" class="layui-form-label">
					<span class="x-red">*</span>密码</label>
				<div class="layui-input-inline">
					<input maxlength="16" type="password" placeholder="请输入密码" id="passWord" name="passWord" required="" lay-verify="required" autocomplete="off"
					       class="layui-input"></div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label for="desc" class="layui-form-label"><span class="x-red">*</span>角色</label>
				<div class="layui-input-inline">
					<select name="status" id="roles" lay-verify="required">
						<option v-for="role in roleList" :value="role.id">{{role.name}}</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label for="desc" class="layui-form-label"><span class="x-red">*</span>赛区</label>
				<div class="layui-input-inline">
					<select name="status" id="zone" lay-verify="required">
						<option v-for="zone in zoneList" :value="zone.id">{{zone.zoneName}}</option>
						<!-- <option value="">全部</option>
						<option value="0">1</option>
						<option value="1">2</option>
						<option value="2">3</option> -->
					</select>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label for="desc" class="layui-form-label"><span class="x-red">*</span>状态</label>
				<div class="layui-input-inline">
					<select name="status" lay-verify="required">
						<option value="0">启用</option>
						<option value="1">禁用</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item layui-form-text">
				<label for="desc" class="layui-form-label">备注</label>
				<div class="layui-input-block">
					<textarea maxlength="100" placeholder="请输入备注内容" id="desc" name="desc" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"></label>
				<button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
			</div>
		</form>
	</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/abkj/auth/api/role.js"></script>
<script type="text/javascript" src="./js/abkj/match/api/zone.js"></script>
<script type="text/javascript" src="./js/abkj/ext/login.js"></script>
<script type="text/javascript" src="./js/abkj/auth/api/account.js"></script>
<script type="text/javascript" src="./js/abkj/fun_tool.js"></script>
<script type="text/javascript" src="./js/abkj/slAjax.js"></script>
<script>
var funTool = fun_tool()
var varId = funTool.getUrlParam('id')
var app = new Vue({
	el: '#app',
	data: {
		zoneList: [],
		roleList: []
	},
	mounted: function () {
		var vm = this
		this.getData()
		layui.use('form', function () {
			vm.form = layui.form
			if (funTool.getUrlParam('id')) {
				vm.form.val('accountForm', {
					userName: 'xxxs'
				})
			}
		})
	},
	methods: {
		loadZoneList: function () {
			var vm = this
			ZonequeryList({}, function (data) {
				vm.zoneList = data
				vm.loadRoleList()
			}, function (status, message) {
				alert(message)
			})
		},
		loadAccount: function () {
			if (varId != null) {
				AccountgetObj(varId, function (data) {
					//初始化页面控件
				})
			}
		},
		loadRoleList: function () {
			var vm = this
			RolequeryList({}, function (data) {
				vm.roleList = data
				vm.loadAccount()
			}, function (status, message) {
				alert(message)
			})
		},
		getData: function () {
			this.loadZoneList()
		}
	}
})
</script>
<script>
layui.use('laydate',
	function () {
		var laydate = layui.laydate
		
		//执行一个laydate实例
		laydate.render({
			elem: '#start' //指定元素
		})
		
		laydate.render({
			elem: '#start1' //指定元素
		})
		laydate.render({
			elem: '#start2' //指定元素
		})
		//执行一个laydate实例
		laydate.render({
			elem: '#end' //指定元素
		})
		laydate.render({
			elem: '#end1' //指定元素
		})
		laydate.render({
			elem: '#end2' //指定元素
		})
		
	})

layui.use(['form', 'layer'],
	function () {
		$ = layui.jquery
		var form = layui.form,
			layer = layui.layer
		
		//自定义验证规则
		form.verify({
			nikename: function (value) {
				if (value.length < 5) {
					return '昵称至少得5个字符啊'
				}
			},
			pass: [/(.+){6,12}$/, '密码必须6到12位'],
			repass: function (value) {
				if ($('#L_pass').val() != $('#L_repass').val()) {
					return '两次密码不一致'
				}
			}
		})
		
		//监听提交
		form.on('submit(add)',
			function (data) {
				console.log(data)
				var varAccount = {
					userName: data.field.userName,
					passWord: data.field.passWord,
					isProhibit: data.field.status,
					remark: data.field.remark,
					zoneId: $('#zone').val()
				}
				varAccount.roleIds = []
				varAccount.roleIds.push($('#roles').val())
				console.log(JSON.stringify(varAccount))
				addAccount(varAccount, function (data) {
					layer.alert('增加成功', {
							icon: 6
						},
						function () {
							// 获得frame索引
							var index = parent.layer.getFrameIndex(window.name)
							//关闭当前frame
							parent.layer.close(index)
							xadmin.father_reload()
						})
				}, function (status, message) {
				
				})
				//发异步，把数据提交给php
				
				return false
			})
		
	})</script>
<script>var _hmt = _hmt || [];
(function () {
	var hm = document.createElement('script')
	hm.src = 'https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190'
	var s = document.getElementsByTagName('script')[0]
	s.parentNode.insertBefore(hm, s)
})()</script>
</body>

</html>
